<template>
  <div :class="isFull ? 'chart chartFull' : 'chart'">
    <div class="chartHeader">
      <h2>夷陵区- 数据指挥中心</h2>
      <el-row class="menus">
        <el-col
          @click.native="handleMenu(1)"
          :span="8"
          :class="currentIndex == 1 ? 'activedMenu' : ''"
          >数据概况</el-col
        >
        <el-col
          @click.native="handleMenu(2)"
          :span="8"
          :class="currentIndex == 2 ? 'activedMenu' : ''"
          >风险预警</el-col
        >
        <!-- <el-col @click.native="handleMenu(3)" :span="8" :class="currentIndex == 3? 'activedMenu':''">移动执法</el-col> -->
      </el-row>
      <div class="actions">
        <div class="date">{{ getDates() }}</div>
        <div class="icon" @click="handleFull">
          <img :src="require('@/assets/ylChart/fullIcon.png')" alt="" />
        </div>
      </div>
    </div>
    <div class="chartContent">
      <data-profiling v-if="currentIndex === 1" />
      <risk-warning v-if="currentIndex === 2" :isFull="isFullScreen" />
    </div>
  </div>
</template>
<script>
import RiskWarning from './riskWarning.vue'
import dataProfiling from './dataProfiling.vue'
export default {
  data() {
    return {
      isFull: false,
      isFullScreen: false,
      currentIndex: 2,
    }
  },
  components: {
    RiskWarning,
    dataProfiling,
  },
  created() {
    var _this = this
    document.onkeyup = function (e) {
      let key = window.event.keyCode
      if (key == 122) {
        _this.isFullScreen = !_this.isFullScreen
        if (!_this.isFullScreen) {
          this.isFull = false
        } else {
          this.isFull = true
        }
      }
    }
  },
  methods: {
    getDates() {
      let dates = new Date()
      let year = dates.getFullYear()
      let month = dates.getMonth()
      let day = dates.getDate()
      let weeks = dates.getDay()
      let week = [
        '星期日',
        '星期一',
        '星期二',
        '星期三',
        '星期四',
        '星期五',
        '星期六',
      ]
      return year + '年' + (month + 1) + '月' + day + ' 日  ' + week[weeks]
    },
    handleMenu(index) {
      this.currentIndex = index
    },
    handleFull() {
      this.isFull = !this.isFull
      this.$nextTick(() => {
        window.dispatchEvent(new Event('resize'))
      })
    },
  },
}
</script>
<style lang="less" scoped>
.chart {
  // height: calc(100% - 106px) !important;
  // left: 0!important;
  // top: 106px!important;
  // bottom: 0!important;
  background: url('./../../assets/ylChart/bg.png') center center no-repeat;
  background-size: 100% 100%;
  &Header {
    height: 74px;
    background: url('./../../assets/ylChart/Top@2x.png') center center no-repeat;
    background-position: -7px -56px;
    background-size: 101% 186%;
    position: relative;
    .menus {
      position: absolute;
      left: 0;
      top: 24px;
      bottom: 6px;
      width: 30%;
      cursor: pointer;
      .el-col {
        height: 100%;
        line-height: 44px;
        text-align: center;
        color: #fff;
        font-size: 16px;
        font-weight: 500;
        background: url('./../../assets/ylChart/menuBg.png') center center
          no-repeat;
        background-size: 100% 100%;
      }
      .activedMenu {
        background: url('./../../assets/ylChart/menuBgs.png') center center
          no-repeat;
        background-size: 100% 85%;
      }
    }
    .actions {
      position: absolute;
      right: 0;
      top: 30px;
      bottom: 6px;
      height: 26px;
      line-height: 26px;
      width: 30%;
      color: #fff;
      font-size: 16px;
      text-align: right;
      padding-right: 30px;
      .date,
      .icon {
        display: inline-block;
        vertical-align: middle;
      }
      .icon img {
        cursor: pointer;
        display: block;
        width: 25px;
        height: 25px;
        margin-left: 95px;
      }
    }
    h2 {
      line-height: 64px;
      height: 64px;
      text-align: center;
      color: #fff;
      font-size: 30px;
    }
  }
  &Content {
    height: calc(100% - 74px);
  }
}
.containerRouterViewWrap.chartFull {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  height: 100% !important;
  z-index: 2021;
  .chartHeader {
    height: 107px;
    background-position: -23px -80px;
    position: relative;
    .menus {
      position: absolute;
      left: 0;
      top: 42px;
      bottom: 10px;
      width: 30%;
      cursor: pointer;
      .el-col {
        height: 100%;
        line-height: 55px;
        text-align: center;
        color: #fff;
        font-size: 18px;
        font-weight: 500;
        background: url('./../../assets/ylChart/menuBg.png') center center
          no-repeat;
        background-size: 100% 100%;
      }
      .activedMenu {
        background: url('./../../assets/ylChart/menuBgs.png') center center
          no-repeat;
        background-size: 100% 85%;
      }
    }
    .actions {
      position: absolute;
      right: 0;
      top: 56px;
      bottom: 10px;
      height: 26px;
      line-height: 26px;
      width: 30%;
      color: #fff;
      font-size: 18px;
      text-align: right;
      padding-right: 30px;
      .date {
        line-height: 26px;
      }
      .date,
      .icon {
        display: inline-block;
        vertical-align: middle;
      }
      .icon img {
        cursor: pointer;
        display: block;
        width: 25px;
        height: 25px;
        margin-left: 95px;
      }
    }
    h2 {
      line-height: 86px;
      height: 86px;
      text-align: center;
      color: #fff;
      font-size: 40px;
    }
  }
  .chartContent {
    height: calc(100% - 107px);
  }
}
</style>
